<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 6.3.0">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/apple-touch-icon-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">


<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
  <link rel="stylesheet" href="//cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.css">

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"jinsen711.github.io","root":"/","scheme":"Gemini","version":"7.8.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":true,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":true,"color":"#222","save":"auto"},"fancybox":true,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":true,"nav":{"disqus":{"text":"Load Disqus","order":-1},"gitalk":{"order":-2}}},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":true,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
  </script>

  <meta name="description" content="搭建博客时用到的资料和自己博客的配置">
<meta property="og:type" content="article">
<meta property="og:title" content="搭建博客">
<meta property="og:url" content="http://jinsen711.github.io/%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2/%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2/">
<meta property="og:site_name" content="みのり - ブログ">
<meta property="og:description" content="搭建博客时用到的资料和自己博客的配置">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="http://jinsen711.github.io/images/%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2/1.jpg">
<meta property="article:published_time" content="2024-04-16T10:12:04.232Z">
<meta property="article:modified_time" content="2024-04-12T16:35:02.371Z">
<meta property="article:author" content="lijinsen">
<meta property="article:tag" content="hexo">
<meta property="article:tag" content="Next">
<meta property="article:tag" content="博客">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://jinsen711.github.io/images/%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2/1.jpg">

<link rel="canonical" href="http://jinsen711.github.io/%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2/%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>

  <title>搭建博客 | みのり - ブログ</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">みのり - ブログ</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
      <p class="site-subtitle" itemprop="description">くしえだみのり</p>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>




<nav class="site-nav">
  <ul id="menu" class="main-menu menu">
        <li class="menu-item menu-item-主页">

    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>主页</a>

  </li>
        <li class="menu-item menu-item-标签">

    <a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>

  </li>
        <li class="menu-item menu-item-分类">

    <a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>

  </li>
        <li class="menu-item menu-item-记录">

    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>记录</a>

  </li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div id="search-result">
  <div id="no-result">
    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
  </div>
</div>

    </div>
  </div>

</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>
  <div class="reading-progress-bar"></div>
  <a role="button" class="book-mark-link book-mark-link-fixed"></a>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content post posts-expand">
            

    
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://jinsen711.github.io/%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2/%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar-2.gif">
      <meta itemprop="name" content="lijinsen">
      <meta itemprop="description" content="とらドラ!">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="みのり - ブログ">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          搭建博客
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2024-04-16 18:12:04" itemprop="dateCreated datePublished" datetime="2024-04-16T18:12:04+08:00">2024-04-16</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="far fa-calendar-check"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2024-04-13 00:35:02" itemprop="dateModified" datetime="2024-04-13T00:35:02+08:00">2024-04-13</time>
              </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/%E5%AD%A6%E4%B9%A0%E8%AE%B0%E5%BD%95/" itemprop="url" rel="index"><span itemprop="name">学习记录</span></a>
                </span>
            </span>

          
            <span class="post-meta-item" title="阅读次数" id="busuanzi_container_page_pv" style="display: none;">
              <span class="post-meta-item-icon">
                <i class="fa fa-eye"></i>
              </span>
              <span class="post-meta-item-text">阅读次数：</span>
              <span id="busuanzi_value_page_pv"></span>
            </span><br>
            <span class="post-meta-item" title="本文字数">
              <span class="post-meta-item-icon">
                <i class="far fa-file-word"></i>
              </span>
                <span class="post-meta-item-text">本文字数：</span>
              <span>7.9k</span>
            </span>
            <span class="post-meta-item" title="阅读时长">
              <span class="post-meta-item-icon">
                <i class="far fa-clock"></i>
              </span>
                <span class="post-meta-item-text">阅读时长 &asymp;</span>
              <span>7 分钟</span>
            </span>
            <div class="post-description">搭建博客时用到的资料和自己博客的配置</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <h1 id="1-搭建个人博客"><a href="#1-搭建个人博客" class="headerlink" title="1 搭建个人博客"></a>1 搭建个人博客</h1><h2 id="1-1-使用github搭建个人博客"><a href="#1-1-使用github搭建个人博客" class="headerlink" title="1.1 使用github搭建个人博客"></a>1.1 使用github搭建个人博客</h2><p><img src="/images/%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2/1.jpg" alt="图片描述"></p>
<h2 id="1-2-使用gitee搭建个人博客"><a href="#1-2-使用gitee搭建个人博客" class="headerlink" title="1.2 使用gitee搭建个人博客"></a>1.2 使用gitee搭建个人博客</h2><h2 id="1-3-butterfly基本使用"><a href="#1-3-butterfly基本使用" class="headerlink" title="1.3 butterfly基本使用"></a>1.3 butterfly基本使用</h2><h3 id="1-3-1-官方教程"><a href="#1-3-1-官方教程" class="headerlink" title="1.3.1 官方教程"></a>1.3.1 官方教程</h3><p>![[Butterfly 安裝文檔(一) 快速開始 _ Butterfly (2024_4_10 13_15_01).html]]<br>![[Butterfly 安裝文檔(二) 主題頁面 _ Butterfly (2024_4_10 13_15_39).html]]<br>![[Butterfly 安裝文檔(三) 主題配置-1 _ Butterfly (2024_4_10 13_17_58).html]]</p>
<h2 id="1-4-配置Next是用到的"><a href="#1-4-配置Next是用到的" class="headerlink" title="1.4 配置Next是用到的"></a>1.4 配置Next是用到的</h2><h3 id="1-4-0-快速配置"><a href="#1-4-0-快速配置" class="headerlink" title="1.4.0 快速配置"></a>1.4.0 快速配置</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-deployer-git --save # hexo d时用到</span><br><span class="line">npm install hexo-generator-searchdb --save # 搜索功能</span><br><span class="line">npm install hexo-symbols-count-time --save # 阅读次数和阅读时间</span><br><span class="line">npm install --save hexo-helper-live2d # 博客小人</span><br><span class="line">git clone https://github.com/theme-next/theme-next-pace source/lib/pace # 页面加载效果</span><br></pre></td></tr></table></figure>
<h3 id="1-4-1-创建新页面"><a href="#1-4-1-创建新页面" class="headerlink" title="1.4.1 创建新页面"></a>1.4.1 创建新页面</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"># 例如生成一个tags页面</span><br><span class="line">hexo n page tags</span><br><span class="line"></span><br><span class="line"># 会在source目录生成一个tags文件夹，里面有一个index.md文件，需要手动加一个type类型的键值对</span><br><span class="line">---</span><br><span class="line">title: 标签</span><br><span class="line">date: 2024-04-09 22:08:17</span><br><span class="line">type: &quot;tags&quot;</span><br><span class="line">---</span><br><span class="line"></span><br><span class="line"># 创建其他页面也是同样的不再</span><br></pre></td></tr></table></figure>
<h3 id="1-4-2-显示页面"><a href="#1-4-2-显示页面" class="headerlink" title="1.4.2 显示页面"></a>1.4.2 显示页面</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"># 例如显示1.4.1创建的tags页面</span><br><span class="line"></span><br><span class="line"># 打开Next主题目录的_config.yml文件，搜索menu进行操作</span><br><span class="line">menu:</span><br><span class="line">  主页: / || fa fa-home</span><br><span class="line">  # 关于: /about/ || fa fa-user</span><br><span class="line">  标签: /tags/ || fa fa-tags</span><br><span class="line">  分类: /categories/ || fa fa-th</span><br><span class="line">  archives: /archives/ || fa fa-archive</span><br><span class="line">  #schedule: /schedule/ || fa fa-calendar</span><br><span class="line">  #sitemap: /sitemap.xml || fa fa-sitemap</span><br><span class="line">  #commonweal: /404/ || fa fa-heartbeat</span><br></pre></td></tr></table></figure>
<h3 id="1-4-3-更改主题样式"><a href="#1-4-3-更改主题样式" class="headerlink" title="1.4.3 更改主题样式"></a>1.4.3 更改主题样式</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"># 在主题配置文件中搜索 scheme</span><br><span class="line"></span><br><span class="line"># 个人使用</span><br><span class="line">scheme: Gemini</span><br></pre></td></tr></table></figure>
<h3 id="1-4-4-更改头像"><a href="#1-4-4-更改头像" class="headerlink" title="1.4.4 更改头像"></a>1.4.4 更改头像</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"># 在主题配置文件中搜索 avatar</span><br><span class="line"># 我一般使用本地头像，放到next/source/images中</span><br><span class="line"></span><br><span class="line"># 例如</span><br><span class="line">url: /images/avatar-1.gif</span><br></pre></td></tr></table></figure>
<h3 id="1-4-5-添加社交链接"><a href="#1-4-5-添加社交链接" class="headerlink" title="1.4.5 添加社交链接"></a>1.4.5 添加社交链接</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"># 在主题配置文件中搜索 social</span><br><span class="line"></span><br><span class="line"># 个人配置</span><br><span class="line">social:</span><br><span class="line">  GitHub: https://github.com/jinsen711 || fab fa-github</span><br><span class="line">  E-Mail: mailto:lijinsen1016@gmail.com || fa fa-envelope</span><br></pre></td></tr></table></figure>
<h3 id="1-4-6-添加友情链接"><a href="#1-4-6-添加友情链接" class="headerlink" title="1.4.6 添加友情链接"></a>1.4.6 添加友情链接</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"># 在主题配置文件中搜索 links</span><br><span class="line"></span><br><span class="line"># 个人配置</span><br><span class="line">links:</span><br><span class="line">  bilibili: http://bilibili.com</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h3 id="1-4-7-新键一篇文章"><a href="#1-4-7-新键一篇文章" class="headerlink" title="1.4.7 新键一篇文章"></a>1.4.7 新键一篇文章</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"># 会在/source/_posts目录下生成对应*.md文件</span><br><span class="line">hexo n 文件名</span><br><span class="line"></span><br><span class="line"># 这里面写的 tags categories是用于统计分类的，可以在/tags和/categories页面看的</span><br><span class="line">---</span><br><span class="line">title: 测试文章</span><br><span class="line">date: 2024-04-10 22:24:01</span><br><span class="line">tags:</span><br><span class="line">    - 导航</span><br><span class="line">    - 分享</span><br><span class="line">categories:</span><br><span class="line">    - 前端</span><br><span class="line">---</span><br></pre></td></tr></table></figure>
<h3 id="1-4-8-让文章处于关闭状态"><a href="#1-4-8-让文章处于关闭状态" class="headerlink" title="1.4.8 让文章处于关闭状态"></a>1.4.8 让文章处于关闭状态</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">方法一：写概述</span><br><span class="line">在文章的front-matter中添加description，其中description中的内容就会被显示在首页上，其余一律不显示。</span><br><span class="line"></span><br><span class="line">---</span><br><span class="line">title: 让首页显示部分内容</span><br><span class="line">date: 2020-02-23 22:55:10</span><br><span class="line">description: 这是显示在首页的概述，正文内容均会被隐藏。</span><br><span class="line">---</span><br><span class="line"></span><br><span class="line">比较不方便的是还得写一下概述，很多时候会懒得写概述，于是就需要第二种方法了。</span><br><span class="line"></span><br><span class="line">方法二：文章截断</span><br><span class="line">在需要截断的地方加入：</span><br><span class="line"></span><br><span class="line">&lt;!--more--&gt;</span><br><span class="line">1</span><br><span class="line">首页就会显示这条以上的所有内容，隐藏接下来的所有内容。</span><br><span class="line">例如本文会显示到修改配置上面。</span><br><span class="line"></span><br><span class="line">这个明显就方便很多，但当然有利有弊，比如开头都是废话首页看着就不是很好看，因此我一般会先选择方法二，如果感觉文章前面的写的不太好再用方法一。</span><br></pre></td></tr></table></figure>
<h3 id="1-4-9-设置动态背景"><a href="#1-4-9-设置动态背景" class="headerlink" title="1.4.9 设置动态背景"></a>1.4.9 设置动态背景</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"># 在主题配置文件中搜索 canvas</span><br><span class="line"></span><br><span class="line"># 有下面的这几种，不知道为什么我设置后没有效果</span><br><span class="line">three:</span><br><span class="line">  enable: false</span><br><span class="line">  three_waves: false</span><br><span class="line">  canvas_lines: false</span><br><span class="line">  canvas_sphere: false</span><br></pre></td></tr></table></figure>
<h3 id="1-4-10-添加搜索功能"><a href="#1-4-10-添加搜索功能" class="headerlink" title="1.4.10 添加搜索功能"></a>1.4.10 添加搜索功能</h3><ol>
<li>安装 <code>hexo-generator-searchdb</code>，在站点的根目录下执行以下命令：<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-generator-searchdb --save</span><br></pre></td></tr></table></figure></li>
<li>编辑 博客配置文件，新增以下内容到任意位置：<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">search:</span><br><span class="line">	path: search.xml</span><br><span class="line">	field: post</span><br><span class="line">	format: html    </span><br><span class="line">	limit: 10000</span><br></pre></td></tr></table></figure></li>
<li>编辑 主题配置文件，启用本地搜索功能：<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"># Local search</span><br><span class="line">local_search:</span><br><span class="line">  enable: true</span><br></pre></td></tr></table></figure></li>
</ol>
<h3 id="1-4-11-添加访问数量统计功能"><a href="#1-4-11-添加访问数量统计功能" class="headerlink" title="1.4.11 添加访问数量统计功能"></a>1.4.11 添加访问数量统计功能</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"># 在主题配置文件搜索 busuanzi_count</span><br><span class="line"></span><br><span class="line"># 个人配置</span><br><span class="line">busuanzi_count:</span><br><span class="line">  enable: true</span><br><span class="line">  total_visitors: true</span><br><span class="line">  total_visitors_icon: fa fa-user</span><br><span class="line">  total_views: true</span><br><span class="line">  total_views_icon: fa fa-eye</span><br><span class="line">  post_views: true</span><br><span class="line">  post_views_icon: fa fa-eye</span><br></pre></td></tr></table></figure>
<h3 id="1-4-12-隐藏底部hexo"><a href="#1-4-12-隐藏底部hexo" class="headerlink" title="1.4.12 隐藏底部hexo"></a>1.4.12 隐藏底部hexo</h3><p>打开<code>themes/next/layout/_partials/footer.swig</code>,使用<code>&lt;!--</code>以及<code>--&gt;</code>隐藏相关代码即可，或者直接删除</p>
<h3 id="1-4-13-添加文字统计和阅读时长"><a href="#1-4-13-添加文字统计和阅读时长" class="headerlink" title="1.4.13 添加文字统计和阅读时长"></a>1.4.13 添加文字统计和阅读时长</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"># 安装</span><br><span class="line">npm install hexo-symbols-count-time --save</span><br><span class="line"></span><br><span class="line"># 在博客配置文件中添加</span><br><span class="line">symbols_count_time:</span><br><span class="line">  symbols: true</span><br><span class="line">  time: true</span><br><span class="line">  total_symbols: false # 关闭博客下面文字总数</span><br><span class="line">  total_time: false # 关闭博客下面阅读时间数</span><br><span class="line">  </span><br><span class="line"># 在主题配置文件中搜索 symbols_count_time</span><br><span class="line">symbols_count_time: </span><br><span class="line">	separated_meta: true </span><br><span class="line">	item_text_post: true </span><br><span class="line">	item_text_total: false </span><br></pre></td></tr></table></figure>
<h3 id="1-4-14-右上角添加github图标"><a href="#1-4-14-右上角添加github图标" class="headerlink" title="1.4.14 右上角添加github图标"></a>1.4.14 右上角添加github图标</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"># 在主题配置文件搜索 github_banner</span><br><span class="line"></span><br><span class="line"># 个人配置</span><br><span class="line">github_banner:</span><br><span class="line">  enable: true</span><br><span class="line">  permalink: https://github.com/jinsen711</span><br><span class="line">  title: 拜访我</span><br></pre></td></tr></table></figure>
<h3 id="1-4-15-添加文件阅读进度条"><a href="#1-4-15-添加文件阅读进度条" class="headerlink" title="1.4.15 添加文件阅读进度条"></a>1.4.15 添加文件阅读进度条</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"># 在主题配置文件搜索 reading_progress</span><br><span class="line"></span><br><span class="line"># 个人配置</span><br><span class="line">reading_progress:</span><br><span class="line">  enable: true</span><br><span class="line">  # Available values: top | bottom</span><br><span class="line">  position: top</span><br><span class="line">  color: &#x27;#37c6c0&#x27;</span><br><span class="line">  height: 3px</span><br></pre></td></tr></table></figure>
<h3 id="1-4-16-给自己的博客添加小人"><a href="#1-4-16-给自己的博客添加小人" class="headerlink" title="1.4.16 给自己的博客添加小人"></a>1.4.16 给自己的博客添加小人</h3><ol>
<li>安装live2d<br><code>npm install --save hexo-helper-live2d</code></li>
<li>在博客配置页面添加配置文件<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"># 个人配置</span><br><span class="line">live2d:</span><br><span class="line">  enable: true</span><br><span class="line">  # enable: false</span><br><span class="line">  scriptFrom: local # 默认</span><br><span class="line">  pluginRootPath: live2d_models/ # 插件在站点上的根目录(相对路径)</span><br><span class="line">  pluginJsPath: lib/ # 脚本文件相对与插件根目录路径</span><br><span class="line">  pluginModelPath: assets/ # 模型文件相对与插件根目录路径</span><br><span class="line">  # scriptFrom: jsdelivr # jsdelivr CDN</span><br><span class="line">  # scriptFrom: unpkg # unpkg CDN</span><br><span class="line">  # scriptFrom: https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 url</span><br><span class="line">  tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中</span><br><span class="line">  debug: false # 调试, 是否在控制台输出日志</span><br><span class="line">  model:</span><br><span class="line">    use: live2d-widget-model-nito # npm-module package name   live2d-widget-model-shizuku</span><br><span class="line">    # use: wanko # 博客根目录/live2d_models/ 下的目录名</span><br><span class="line">    # use: ./wives/wanko # 相对于博客根目录的路径</span><br><span class="line">    # use: https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # 你的自定义 url</span><br><span class="line">    display:    # 模型展示的位置设置</span><br><span class="line">        position: right     # 方位</span><br><span class="line">        width: 150          # 宽度</span><br><span class="line">        height: 300         # 高度</span><br><span class="line">    mobile:</span><br><span class="line">        show: false   # 在移动设备上是否开启live2d</span><br></pre></td></tr></table></figure></li>
<li>安装模型<br><code>npm install npm install --save live2d-widget-model-xxx</code></li>
<li>使用模型<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"># 把模型放到自己在pluginRootPath指定的文件夹中</span><br><span class="line"># 在第2步中的model成员中添加自己下载的模型，</span><br><span class="line">model:</span><br><span class="line">    use: live2d-widget  ## 模型文件</span><br></pre></td></tr></table></figure></li>
</ol>
<h3 id="1-4-17-文件创建和更新时间"><a href="#1-4-17-文件创建和更新时间" class="headerlink" title="1.4.17 文件创建和更新时间"></a>1.4.17 文件创建和更新时间</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"># 在主题配置文件中搜索 post_meta</span><br><span class="line"></span><br><span class="line"># 个人配置</span><br><span class="line">post_meta:</span><br><span class="line">  item_text: true</span><br><span class="line">  created_at: true</span><br><span class="line">  updated_at:</span><br><span class="line">    enable: true</span><br><span class="line">    another_day: true</span><br><span class="line">  categories: true</span><br></pre></td></tr></table></figure>
<h3 id="1-4-18-页面加载效果"><a href="#1-4-18-页面加载效果" class="headerlink" title="1.4.18 页面加载效果"></a>1.4.18 页面加载效果</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"># 在博客主目录下载</span><br><span class="line">git clone https://github.com/theme-next/theme-next-pace source/lib/pace</span><br><span class="line"></span><br><span class="line"># 在主题配置目录搜索 pace</span><br><span class="line"># 个人配置</span><br><span class="line">pace:</span><br><span class="line">  enable: false</span><br><span class="line">  # Themes list:</span><br><span class="line">  # big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple</span><br><span class="line">  # corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal</span><br><span class="line">  theme: center-simple</span><br></pre></td></tr></table></figure>
<h3 id="1-4-19-隐藏底部信息"><a href="#1-4-19-隐藏底部信息" class="headerlink" title="1.4.19 隐藏底部信息"></a>1.4.19 隐藏底部信息</h3><p><code>在主题配置目录搜索 footer进行配置</code></p>
<h3 id="1-4-20-设置背景图片"><a href="#1-4-20-设置背景图片" class="headerlink" title="1.4.20 设置背景图片"></a>1.4.20 设置背景图片</h3><ol>
<li>_在blog&#x2F;source&#x2F;<em>data&#x2F;中创建styles.styl文件</em><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"># styles.styl文件中的个人配置</span><br><span class="line">body &#123;</span><br><span class="line">    background:url(/images/background.jpg); // 这个的完整目录为 blog/themes/next/source/images/background.jpg</span><br><span class="line">    background-repeat: no-repeat;</span><br><span class="line">    background-attachment:fixed;</span><br><span class="line">    background-size: cover;</span><br><span class="line">    background-position:50% 50%;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">//博客内容透明化</span><br><span class="line">//文章内容的透明度设置</span><br><span class="line">.content-wrap &#123;</span><br><span class="line">  opacity: 0.95;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">//侧边框的透明度设置</span><br><span class="line">.sidebar &#123;</span><br><span class="line">  opacity: 0.95;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">//菜单栏的透明度设置</span><br><span class="line">.header-inner &#123;</span><br><span class="line">  background: rgba(255,255,255,0.95);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">//搜索框（local-search）的透明度设置</span><br><span class="line">.popup &#123;</span><br><span class="line">  opacity: 0.95;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
<li><em>在主题配置文件中搜索 custom_file_path</em><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"># 个人配置</span><br><span class="line">custom_file_path:</span><br><span class="line">  style: source/_data/styles.styl</span><br></pre></td></tr></table></figure></li>
<li><em>背景图片放入blog&#x2F;themes&#x2F;next&#x2F;source&#x2F;images&#x2F;中即可</em></li>
</ol>
<h3 id="1-4-21-设置圆角"><a href="#1-4-21-设置圆角" class="headerlink" title="1.4.21 设置圆角"></a>1.4.21 设置圆角</h3><ol>
<li>_在blog&#x2F;source&#x2F;<em>data&#x2F;中创建variables.styl文件</em><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"># variables.styl文件中的个人配置</span><br><span class="line">// 圆角设置  </span><br><span class="line">$border-radius-inner = 20px;  </span><br><span class="line">$border-radius = 20px;</span><br></pre></td></tr></table></figure></li>
<li><em>在主题配置文件中搜索 custom_file_path</em><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"># 个人配置</span><br><span class="line">custom_file_path:</span><br><span class="line">  variable: source/_data/variables.styl</span><br></pre></td></tr></table></figure>
<strong>问题：边栏的圆角明显有一层阴影，圆角效果不明显</strong><br>_修改 &#x2F;themes&#x2F;next&#x2F;source&#x2F;css&#x2F;<em>variables&#x2F;Gemini.styl 内代码,将 $body-bg-color 赋值为透明 transparent</em><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">// Variables of Gemini scheme  </span><br><span class="line">// ==================================================  </span><br><span class="line">  </span><br><span class="line">@import &quot;Pisces.styl&quot;;  </span><br><span class="line">  </span><br><span class="line">// Settings for some of the most global styles.  </span><br><span class="line">// --------------------------------------------------  </span><br><span class="line">// $body-bg-color           = #eee;  </span><br><span class="line">$body-bg-color           = transparent;  </span><br><span class="line">// Borders.  </span><br><span class="line">// --------------------------------------------------  </span><br><span class="line">$box-shadow-inner        = 0 2px 2px 0 rgba(0, 0, 0, .12), 0 3px 1px -2px rgba(0, 0, 0, .06), 0 1px 5px 0 rgba(0, 0, 0, .12);  </span><br><span class="line">$box-shadow              = 0 2px 2px 0 rgba(0, 0, 0, .12), 0 3px 1px -2px rgba(0, 0, 0, .06), 0 1px 5px 0 rgba(0, 0, 0, .12), 0 -1px .5px 0 rgba(0, 0, 0, .09);  </span><br><span class="line">  </span><br><span class="line">// $border-radius-inner     = 20px;  </span><br><span class="line">// $border-radius           = 20px;  </span><br><span class="line">  </span><br><span class="line">$border-radius-inner     = initial;  </span><br><span class="line">$border-radius           = initial;  </span><br><span class="line">// $border-radius-inner     = 0 0 3px 3px;  </span><br><span class="line">// $border-radius           = 3px;</span><br></pre></td></tr></table></figure></li>
</ol>
<h3 id="1-4-22-书签功能"><a href="#1-4-22-书签功能" class="headerlink" title="1.4.22 书签功能"></a>1.4.22 书签功能</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"># 在主题配置页面搜索</span><br><span class="line"></span><br><span class="line"># 个人配置</span><br><span class="line">bookmark:</span><br><span class="line">  enable: true</span><br><span class="line">  # Customize the color of the bookmark.</span><br><span class="line">  color: &quot;#222&quot;</span><br><span class="line">  # If auto, save the reading progress when closing the page or clicking the bookmark-icon.</span><br><span class="line">  # If manual, only save it by clicking the bookmark-icon.</span><br><span class="line">  save: auto</span><br></pre></td></tr></table></figure>
<h3 id="1-4-23-优化网页"><a href="#1-4-23-优化网页" class="headerlink" title="1.4.23 优化网页"></a>1.4.23 优化网页</h3><p>lazyload 是网站常用的技术，通过按需加载，避免一次性加载过多内容导致的打开缓慢</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"># 在主题配置页面搜索</span><br><span class="line"></span><br><span class="line"># 个人配置</span><br><span class="line"># Vanilla JavaScript plugin for lazyloading images.</span><br><span class="line"># For more information: https://apoorv.pro/lozad.js/demo/</span><br><span class="line">lazyload: true</span><br></pre></td></tr></table></figure>
<h3 id="1-4-24-点击图片放大"><a href="#1-4-24-点击图片放大" class="headerlink" title="1.4.24 点击图片放大"></a>1.4.24 点击图片放大</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"># 在主题页面搜索</span><br><span class="line"></span><br><span class="line"># 个人配置</span><br><span class="line"># FancyBox is a tool that offers a nice and elegant way to add zooming functionality for images.</span><br><span class="line"># For more information: https://fancyapps.com/fancybox/</span><br><span class="line">fancybox: true</span><br></pre></td></tr></table></figure>
<h3 id="1-4-25-优化文章内容"><a href="#1-4-25-优化文章内容" class="headerlink" title="1.4.25 优化文章内容"></a>1.4.25 优化文章内容</h3><p>对于强迫症来说，中英文混排时加上空格能很大程度改善阅读体验，但是有时候会不小心打漏部分空格，而 <a target="_blank" rel="noopener" href="https://github.com/vinta/pangu.js">pangu</a> 这个项目就可以帮你在展示时自动加上空格</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"># 在主题页面搜索</span><br><span class="line"></span><br><span class="line"># 个人配置</span><br><span class="line"># Pangu Support</span><br><span class="line"># For more information: https://github.com/vinta/pangu.js</span><br><span class="line"># Server-side plugin: https://github.com/next-theme/hexo-pangu</span><br><span class="line">pangu: true</span><br></pre></td></tr></table></figure>
<h3 id="1-4-26过渡动画"><a href="#1-4-26过渡动画" class="headerlink" title="1.4.26过渡动画"></a>1.4.26过渡动画</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"># 在主题配置页面搜索</span><br><span class="line"></span><br><span class="line"># 个人配置</span><br><span class="line">motion:</span><br><span class="line">  enable: true</span><br><span class="line">  async: true # 把这个改成了ture</span><br><span class="line">  transition:</span><br><span class="line">    # Transition variants:</span><br><span class="line">    # fadeIn | flipXIn | flipYIn | flipBounceXIn | flipBounceYIn</span><br><span class="line">    # swoopIn | whirlIn | shrinkIn | expandIn</span><br><span class="line">    # bounceIn | bounceUpIn | bounceDownIn | bounceLeftIn | bounceRightIn</span><br><span class="line">    # slideUpIn | slideDownIn | slideLeftIn | slideRightIn</span><br><span class="line">    # slideUpBigIn | slideDownBigIn | slideLeftBigIn | slideRightBigIn</span><br><span class="line">    # perspectiveUpIn | perspectiveDownIn | perspectiveLeftIn | perspectiveRightIn</span><br><span class="line">    post_block: fadeIn</span><br><span class="line">    post_header: slideDownIn</span><br><span class="line">    post_body: slideDownIn</span><br><span class="line">    coll_header: slideLeftIn</span><br><span class="line">    # Only for Pisces | Gemini.</span><br><span class="line">    sidebar: slideUpIn</span><br></pre></td></tr></table></figure>
<h3 id="1-4-27-添加gitalk评论"><a href="#1-4-27-添加gitalk评论" class="headerlink" title="1.4.27 添加gitalk评论"></a>1.4.27 添加gitalk评论</h3><p>![[hexo主题next中gitalk配置与评论初始化 _ 代码构建你的世界 (2024_4_12 18_29_25).html]]</p>

    </div>

    
    
    

      <footer class="post-footer">
          <div class="post-tags">
              <a href="/tags/hexo/" rel="tag"># hexo</a>
              <a href="/tags/Next/" rel="tag"># Next</a>
              <a href="/tags/%E5%8D%9A%E5%AE%A2/" rel="tag"># 博客</a>
          </div>

        


        
      </footer>
    
  </article>
  
  
  



          </div>
          
    <div class="comments" id="gitalk-container"></div>

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#1-%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2"><span class="nav-text">1 搭建个人博客</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1-1-%E4%BD%BF%E7%94%A8github%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2"><span class="nav-text">1.1 使用github搭建个人博客</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#1-2-%E4%BD%BF%E7%94%A8gitee%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2"><span class="nav-text">1.2 使用gitee搭建个人博客</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#1-3-butterfly%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8"><span class="nav-text">1.3 butterfly基本使用</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-3-1-%E5%AE%98%E6%96%B9%E6%95%99%E7%A8%8B"><span class="nav-text">1.3.1 官方教程</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#1-4-%E9%85%8D%E7%BD%AENext%E6%98%AF%E7%94%A8%E5%88%B0%E7%9A%84"><span class="nav-text">1.4 配置Next是用到的</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-4-0-%E5%BF%AB%E9%80%9F%E9%85%8D%E7%BD%AE"><span class="nav-text">1.4.0 快速配置</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-4-1-%E5%88%9B%E5%BB%BA%E6%96%B0%E9%A1%B5%E9%9D%A2"><span class="nav-text">1.4.1 创建新页面</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-4-2-%E6%98%BE%E7%A4%BA%E9%A1%B5%E9%9D%A2"><span class="nav-text">1.4.2 显示页面</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-4-3-%E6%9B%B4%E6%94%B9%E4%B8%BB%E9%A2%98%E6%A0%B7%E5%BC%8F"><span class="nav-text">1.4.3 更改主题样式</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-4-4-%E6%9B%B4%E6%94%B9%E5%A4%B4%E5%83%8F"><span class="nav-text">1.4.4 更改头像</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-4-5-%E6%B7%BB%E5%8A%A0%E7%A4%BE%E4%BA%A4%E9%93%BE%E6%8E%A5"><span class="nav-text">1.4.5 添加社交链接</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-4-6-%E6%B7%BB%E5%8A%A0%E5%8F%8B%E6%83%85%E9%93%BE%E6%8E%A5"><span class="nav-text">1.4.6 添加友情链接</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-4-7-%E6%96%B0%E9%94%AE%E4%B8%80%E7%AF%87%E6%96%87%E7%AB%A0"><span class="nav-text">1.4.7 新键一篇文章</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-4-8-%E8%AE%A9%E6%96%87%E7%AB%A0%E5%A4%84%E4%BA%8E%E5%85%B3%E9%97%AD%E7%8A%B6%E6%80%81"><span class="nav-text">1.4.8 让文章处于关闭状态</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-4-9-%E8%AE%BE%E7%BD%AE%E5%8A%A8%E6%80%81%E8%83%8C%E6%99%AF"><span class="nav-text">1.4.9 设置动态背景</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-4-10-%E6%B7%BB%E5%8A%A0%E6%90%9C%E7%B4%A2%E5%8A%9F%E8%83%BD"><span class="nav-text">1.4.10 添加搜索功能</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-4-11-%E6%B7%BB%E5%8A%A0%E8%AE%BF%E9%97%AE%E6%95%B0%E9%87%8F%E7%BB%9F%E8%AE%A1%E5%8A%9F%E8%83%BD"><span class="nav-text">1.4.11 添加访问数量统计功能</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-4-12-%E9%9A%90%E8%97%8F%E5%BA%95%E9%83%A8hexo"><span class="nav-text">1.4.12 隐藏底部hexo</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-4-13-%E6%B7%BB%E5%8A%A0%E6%96%87%E5%AD%97%E7%BB%9F%E8%AE%A1%E5%92%8C%E9%98%85%E8%AF%BB%E6%97%B6%E9%95%BF"><span class="nav-text">1.4.13 添加文字统计和阅读时长</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-4-14-%E5%8F%B3%E4%B8%8A%E8%A7%92%E6%B7%BB%E5%8A%A0github%E5%9B%BE%E6%A0%87"><span class="nav-text">1.4.14 右上角添加github图标</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-4-15-%E6%B7%BB%E5%8A%A0%E6%96%87%E4%BB%B6%E9%98%85%E8%AF%BB%E8%BF%9B%E5%BA%A6%E6%9D%A1"><span class="nav-text">1.4.15 添加文件阅读进度条</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-4-16-%E7%BB%99%E8%87%AA%E5%B7%B1%E7%9A%84%E5%8D%9A%E5%AE%A2%E6%B7%BB%E5%8A%A0%E5%B0%8F%E4%BA%BA"><span class="nav-text">1.4.16 给自己的博客添加小人</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-4-17-%E6%96%87%E4%BB%B6%E5%88%9B%E5%BB%BA%E5%92%8C%E6%9B%B4%E6%96%B0%E6%97%B6%E9%97%B4"><span class="nav-text">1.4.17 文件创建和更新时间</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-4-18-%E9%A1%B5%E9%9D%A2%E5%8A%A0%E8%BD%BD%E6%95%88%E6%9E%9C"><span class="nav-text">1.4.18 页面加载效果</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-4-19-%E9%9A%90%E8%97%8F%E5%BA%95%E9%83%A8%E4%BF%A1%E6%81%AF"><span class="nav-text">1.4.19 隐藏底部信息</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-4-20-%E8%AE%BE%E7%BD%AE%E8%83%8C%E6%99%AF%E5%9B%BE%E7%89%87"><span class="nav-text">1.4.20 设置背景图片</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-4-21-%E8%AE%BE%E7%BD%AE%E5%9C%86%E8%A7%92"><span class="nav-text">1.4.21 设置圆角</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-4-22-%E4%B9%A6%E7%AD%BE%E5%8A%9F%E8%83%BD"><span class="nav-text">1.4.22 书签功能</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-4-23-%E4%BC%98%E5%8C%96%E7%BD%91%E9%A1%B5"><span class="nav-text">1.4.23 优化网页</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-4-24-%E7%82%B9%E5%87%BB%E5%9B%BE%E7%89%87%E6%94%BE%E5%A4%A7"><span class="nav-text">1.4.24 点击图片放大</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-4-25-%E4%BC%98%E5%8C%96%E6%96%87%E7%AB%A0%E5%86%85%E5%AE%B9"><span class="nav-text">1.4.25 优化文章内容</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-4-26%E8%BF%87%E6%B8%A1%E5%8A%A8%E7%94%BB"><span class="nav-text">1.4.26过渡动画</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#1-4-27-%E6%B7%BB%E5%8A%A0gitalk%E8%AF%84%E8%AE%BA"><span class="nav-text">1.4.27 添加gitalk评论</span></a></li></ol></li></ol></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="lijinsen"
      src="/images/avatar-2.gif">
  <p class="site-author-name" itemprop="name">lijinsen</p>
  <div class="site-description" itemprop="description">とらドラ!</div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives">
          <span class="site-state-item-count">1</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
        <span class="site-state-item-count">1</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
        <span class="site-state-item-count">3</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author motion-element">
      <span class="links-of-author-item">
        <a href="https://github.com/jinsen711" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;jinsen711" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
      </span>
      <span class="links-of-author-item">
        <a href="mailto:lijinsen1016@gmail.com" title="E-Mail → mailto:lijinsen1016@gmail.com" rel="noopener" target="_blank"><i class="fa fa-envelope fa-fw"></i>E-Mail</a>
      </span>
  </div>


  <div class="links-of-blogroll motion-element">
    <div class="links-of-blogroll-title"><i class="fa fa-link fa-fw"></i>
      Links
    </div>
    <ul class="links-of-blogroll-list">
        <li class="links-of-blogroll-item">
          <a href="http://bilibili.com/" title="http:&#x2F;&#x2F;bilibili.com" rel="noopener" target="_blank">bilibili</a>
        </li>
    </ul>
  </div>

      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2024</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">lijinsen</span>
</div>

        
<div class="busuanzi-count">
  <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <span class="post-meta-item" id="busuanzi_container_site_uv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-user"></i>
      </span>
      <span class="site-uv" title="总访客量">
        <span id="busuanzi_value_site_uv"></span>
      </span>
    </span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item" id="busuanzi_container_site_pv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-eye"></i>
      </span>
      <span class="site-pv" title="总访问量">
        <span id="busuanzi_value_site_pv"></span>
      </span>
    </span>
</div>








      </div>
    </footer>
  </div>

  
  <script src="/lib/anime.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
  <script src="//cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.js"></script>
  <script src="/lib/velocity/velocity.min.js"></script>
  <script src="/lib/velocity/velocity.ui.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/schemes/pisces.js"></script>


<script src="/js/next-boot.js"></script>

<script src="/js/bookmark.js"></script>




  




  
<script src="/js/local-search.js"></script>













  

  

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">

<script>
NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
    var gitalk = new Gitalk({
      clientID    : '5176df9e1a6c41a7136d',
      clientSecret: '0949217a148db37ac63a423ad4f7340547cb8194',
      repo        : 'jinsen711.github.io',
      owner       : 'jinsen711',
      admin       : ['jinsen711'],
      id          : 'e42c95a1d90f2d7a3b1d244780c3fd82',
        language: 'zh-CN',
      distractionFreeMode: true
    });
    gitalk.render('gitalk-container');
  }, window.Gitalk);
});
</script>

</body>
</html>
